<template>
	<template
		v-for="(item, idx) in menu"
		:key="item.name">
		<!-- 渲染菜单项 -->
		<RouterLink
			v-if="!item.submenu"
			:to="item.path">
			<el-menu-item :index="parentIndex + idx">
				<el-icon v-if="item.iconName">
					<EpIcon :icon="icons[item.iconName]" />
				</el-icon>

				<template #title>
					{{ item.name }}
				</template>
			</el-menu-item>
		</RouterLink>

		<!-- 渲染子菜单 -->
		<el-sub-menu
			v-else
			:index="parentIndex + idx">
			<template #title>
				<el-icon v-if="item.iconName">
					<EpIcon :icon="icons[item.iconName]" />
				</el-icon>

				<span>{{ item.name }}</span>
			</template>

			<!-- 对子菜单实施递归 -->
			<EpMenuUnit
				:menu="item.submenu"
				:parentIndex="`${parentIndex}${idx}-`" />
		</el-sub-menu>
	</template>
</template>

<script setup>
import EpIcon from "./EpIcon.vue"

import {
	Document,
	Menu,
	Location,
	User,
	Film,
	VideoCamera,
	Odometer,
	Loading,
	Star,
	PictureFilled,
	PieChart,
	Grid,
} from "@element-plus/icons-vue";

const icons = {
	Document,
	Menu,
	Location,
	User,
	Film,
	VideoCamera,
	Odometer,
	Loading,
	Star,
	PictureFilled,
	PieChart,
	Grid,
};

const { activeIndex, menu, parentIndex } = defineProps({
	activeIndex: String,
	menu: Array,
	parentIndex: String,
});
</script>

<style lang="scss" scoped></style>
